Ext.define("StatsWindow", {

	extend : 'Ext.window.Window',
	modal : true,
	draggable: true,
	width : 800,
	height : 635,
	twitterHandle:'',
	twitterDate:'',
	twitterMethod:'',
	selectedBar: '',
	layout: {
		autoSize: true,
		type: 'vbox',
		align: 'stretch',
		pack: 'start'
	},
	initComponent : function() {

		this.callParent();
	},
	highlightChart: function(chart){
		var date = new Date(this.twitterDate);

		chart.highlight = true;
		chart.unHighlightItem();
		chart.cleanHighlights();

		if(this.twitterMethod == 'weeks'){
			var day = Ext.Date.dayNames[date.getDay()+1];

			for (i = 0, items = chart.items, l = items.length; i < l; i++) {
				if (day == items[i].storeItem.get('Time')) {
					selectedStoreItem = items[i].storeItem;
					chart.highlightItem(items[i]);
					break;
				}
			}

		}
		else {
			var hour = date.getHours();
			for (i = 0, items = chart.items, l = items.length; i < l; i++) {
				console.log(items[i].storeItem);
				if (hour == items[i].storeItem.get('Time')) {
					selectedStoreItem = items[i].storeItem;
					chart.highlightItem(items[i]);
					break;
				}
			}
		}	

		chart.highlight = false;
	},
	listeners: {
		show: function(window,e){
			var handle = window.twitterHandle;
			var store = Ext.create('Ext.data.Store', {
				storeId: 'storeVolume',
				fields : ['Time', 'Volume', 'TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL', 'Mean', '95PercentLowerBound', '95PercentUpperBound'],
				proxy: {
					type: 'ajax',
					url: 'http://ec2-54-221-173-96.compute-1.amazonaws.com:5000/twitter/api/alpha/get_statistics',
					reader: {
						type: 'json',
						root: 'records',
						successProperty: 'success'
					}
				},
				listeners: {
					load: function(store){
						window.createChart(handle,store);    
					}
				}
			});

			store.load({
				params: {
					handle: handle,
					date: window.twitterDate,
					method: window.twitterMethod
				}});
		},
		scope: this
	},
	createChart: function(handle,store){

		var title = 'Hours of the Day'
		if(this.twitterMethod == 'weeks'){
			title = 'Days of the Week';
		}
		
		var chart = Ext.create('Ext.chart.Chart', {
			xtype:'chart',
			style : 'background:#fff',
			theme : 'Category1',
			legend: {                               
				position: 'right'
			},
			store : store,
			axes : [ {
				type : 'Numeric',
				position : 'left',
				fields : ['Time', 'Volume', 'TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL', 'Mean', '95PercentLowerBound', '95PercentUpperBound'],
				title : 'Tweet Volume',
				grid : true
			}, {
				type : 'Category',
				position : 'bottom',
				fields : [ 'Time' ],
				title : title
			} ],
			series : [ {
				type : 'column',
				axis : 'left',
				highlight: true,
				xField : 'Time',
				yField : 'Volume',
				tips: {
					trackMouse: true,
					width: 165,
					height: 28,
					renderer: function(storeItem, item) {
						this.setTitle(String(item.value[1]) + " " + item.yField);
					}
				},
				listeners: {
					afterrender: function (p) {
						this.chart.ownerCt.ownerCt.highlightChart(this);
					}
				}
			}, {
				type : 'scatter',
				axis : 'left',
				xField : 'Time',
				yField : 'Mean',
				markerConfig : {
					type : 'cross',
					size : 5
				},
				tips: {
					trackMouse: true,
					width: 165,
					height: 28,
					renderer: function(storeItem, item) {
						this.setTitle(String(item.value[1]));
					}
				}
			}, {
				type : 'scatter',
				axis : 'left',
				xField : 'Time',
				yField : '95PercentUpperBound',
				markerConfig : {
					type : 'cross',
					size : 5
				},
				tips: {
					trackMouse: true,
					width: 165,
					height: 28,
					renderer: function(storeItem, item) {
						this.setTitle(String(item.value[1]));
					}
				}
			}, {
				type : 'scatter',
				axis : 'left',
				xField : 'Time',
				yField : '95PercentLowerBound',
				markerConfig : {
					type : 'cross',
					size : 5
				},
				tips: {
					trackMouse: true,
					width: 165,
					height: 28,
					renderer: function(storeItem, item) {
						this.setTitle(String(item.value[1]));
					}
				}
			} ]
		});
		var panel = Ext.create('widget.panel', {
			title: handle,
			layout: 'fit',
			height: 300,
			border : 1,
			style : {
				borderColor : '#000000',
				borderStyle : 'solid',
				borderWidth : '1px'
			},
			items: [chart]
		});             

		var panel2 = Ext.create('widget.panel', {
			title: '',
			layout: 'fit',
			border : 1,
			height: 300,
			style : {
				borderColor : '#000000',
				borderStyle : 'solid',
				borderWidth : '1px'
			},
			items: [{
				xtype:'chart',
				style : 'background:#fff',
				theme : 'Category1',
				legend: {                               
					position: 'right'
				},
				store : store,
				axes : [ {
					type : 'Numeric',
					position : 'left',
					fields : ['Time', 'Volume', 'TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL', 'Mean', '95PercentLowerBound', '95PercentUpperBound'],
					title : 'Tweet Volume',
					grid : true
				}, {
					type : 'Category',
					position : 'bottom',
					fields : [ 'Time' ],
					title : title
				} ],
				series : [ {
					type : 'column',
					axis : 'left',
					xField : 'Time',
					yField : ['TweetsNoURL', 'TweetsWithURL', 'ReTweetsNoURL', 'ReTweetsWithURL'],
					tips: {
						trackMouse: true,
						width: 165,
						height: 28,
						renderer: function(storeItem, item) {
							this.setTitle(String(item.value[1]) + " " + item.yField);
						}
					}
				}]
			}]
		});

		this.add([panel, panel2]);
		this.doLayout();
	}
});


